<template>
  <div class="home">
    <div class="home-wrap">
      <!-- 轮播图 -->
      <div class="swiper-container">
        <div class="swiper-wrapper">
          <div class="swiper-slide" v-for="banner in banners" :key="banner.id">
            <img :src="banner.imageUrl" alt="" />
          </div>
        </div>
        <!-- 如果需要分页器 -->
        <div class="swiper-pagination"></div>
      </div>
      <!-- 主页面的分线 -->
      <van-divider
        content-position="left"
        :style="{ color: '#1989fa', borderColor: '#1989fa', padding: '0 16px' }"
      >
        小编精选 特惠全场
      </van-divider>
      <!-- 主页面 -->
      <div class="goods-list">
        <van-list
          v-model="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="onLoad"
        >
          <div class="goods-item" v-for="item in goodsList" :key="item.id">
            <div v-if="item.type === 1">
              <div class="image" is="router-link" tag="div" :to="{}">
                <img :src="item.image" />
              </div>
              <div class="info">
                <h6 class="title">{{ item.title }}</h6>
                <span class="price"
                  >￥{{ item.price && item.price.toFixed(2) }}
                </span>
                <van-icon
                  name="cart"
                  color="#f00"
                  size="24"
                  @click="AddToCartHandler"
                />
              </div>
            </div>
            <div v-else>
              <div class="only-image">
                <img :src="item.image" />
              </div>
            </div>
          </div>
        </van-list>
      </div>
    </div>
    <!-- 回到顶部 -->
    <ToTop />
  </div>
</template>

<script>
import ToTop from "../components/ToTop";
import Swiper from "swiper";
import "swiper/css/swiper.min.css";
import Vue from "vue";
import { Divider, Grid, GridItem, CountDown, Icon, List } from "vant";

Vue.use(CountDown);
Vue.use(Divider);
Vue.use(Grid);
Vue.use(GridItem);
Vue.use(Icon);
Vue.use(List);

export default {
  name: "Home",
  data() {
    return {
      title: "",
      banners: [],
      goodsList: [],
      loading: false,
      finished: false,
      num: 20
    };
  },
  components: {
    ToTop
  },
  created() {
    this.getBanner();
  },
  methods: {
    getBanner() {
      //request挂载到vue原型上的方法在这里调用getHome
      this.$http.getHome().then(resp => {
        this.banners = resp.banners;
        /*
         * 重点注释：
         * 异步获取的数据如果要操作真实DOM需要下一次DOM循环完成以后，也就是nextTick里
         */
        this.$nextTick().then(() => {
          new Swiper(".swiper-container", {
            // direction: "vertical", // 垂直切换选项
            loop: true, // 循环模式选项
            // 自动轮播
            autoplay: {
              delay: 1500,
              stopOnLastSlide: false,
              disableOnInteraction: true
            },

            // 如果需要分页器
            pagination: {
              el: ".swiper-pagination"
            }
          });
        });
      });
    },
    //瀑布流数据
    onLoad() {
      this.$http
        .getList(this.num)
        .then(resp => {
          this.goodsList = [...this.goodsList, ...resp.list];
          if (resp.list.length === 0) this.finished = true;
        })
        .then(() => {
          this.num += 20;
          this.loading = false;
        });
    },
    AddToCartHandler(e) {
      let _index = null;
      if (e.path[3].children.length === 1) {
        e.path[4].children.forEach((item, index) => {
          if (item === e.path[3]) {
            _index = index;
          }
        });
        const { id, image, title, price } = this.goodsList[_index];
        const currentGoods = {
          id,
          image,
          title,
          price,
          amount: 1
        };
        this.$store.commit("AddToCart", currentGoods);
      } else {
        e.path[3].children.forEach((item, index) => {
          if (item === e.path[2]) {
            _index = index;
          }
        });
        const { id, image, title, price } = this.topList[_index];
        const currentGoods = {
          id,
          image,
          title,
          price,
          amount: 1
        };
        this.$store.commit("AddToCart", currentGoods);
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.home {
  height: 100%;
  overflow: auto;
}
.goods-list {
  .van-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    .goods-item {
      float: left;
      width: 48%;
      margin: 10px 0;
      .only-image {
        width: 100%;
        height: 238px;
        margin: 8px 0;
        img {
          height: 100%;
        }
      }
      .info {
        padding: 8px 4px;
        box-sizing: border-box;
        overflow: hidden;
      }
      .title {
        font-size: 14px;
        color: #877a73;
        width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        margin-bottom: 6px;
      }
      .price {
        float: left;
        color: #fa585a;
        font-size: 18px;
      }
      .van-icon-cart {
        float: right;
      }
    }
  }
}
</style>
